import React, { Component, Fragment } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
// import './style.css'

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      // show: true
      list: []
    }
    this.handleToggole = this.handleToggole.bind(this)
  }

  render() {
    return (
      <Fragment>
        {/* <CSSTransition
          in={this.state.show}
          timeout={1000}
          classNames='fade'
          unmountOnExit
          onEntered={(el) => {el.style.color='blue'}}
          appear={true}
        > */}
        <TransitionGroup>
          {
            this.state.list.map((item, index) => {
              return (
                <CSSTransition
                  timeout={1000}
                  classNames='fade'
                  unmountOnExit
                  onEntered={(el) => { el.style.color = 'blue' }}
                  appear={true}
                  key={index}
                >
                  <div>{item}</div>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
        {/* </CSSTransition> */}
        <button onClick={this.handleToggole}>toggle</button>
      </Fragment>
    )
  }

  handleToggole() {
    // this.setState({
    //   show: this.state.show ? false : true
    // });
    this.setState((prevState) => ({
      list: [...prevState.list, 'item']
    }))
  }
}

export default App;